<template>
    <div>
        <Header></Header>
        <div class="a">
            <router-link to="/archives">archives &nbsp</router-link>
            <router-link to="/categories">categories &nbsp</router-link>
            <router-link to="/tags">tags &nbsp</router-link>
            <router-link to="/index">index</router-link>
        </div>
        <el-row style="margin-top:60px;" type="flex" justify="center">
            <el-col class style="width:70%">
                <el-row class="div2" v-for="(item,index) in Categories" :key="index">
                    <span>
                        <router-link
                            :to="{name:'Categories',params:{categoriesName:item.categorieName}}"
                        >
                            <p>{{item.categorieName}}({{item.articleNum}})</p>
                        </router-link>
                        <el-divider></el-divider>
                    </span>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import Header from './component/Header';
export default {
    name: 'Categories',
    components: { Header },
    data() {
        return {
            Categories: []
        };
    },
    created() {
        const _this = this;
        this.$axios.get('http://39.106.115.234:8083/article/categories').then((res) => {
            console.log(res.data.data);
            _this.Categories = res.data.data;
        });
    }
};
</script>

<style scoped>
.a {
    margin: 20px;
    width:20%;
    border-width: 2px;
    border-color: '#ff00ff';
    background: #fac002;
}
.b {
    margin: 20px;
    background: #00ffbb;
}
</style>
